<template>
  <div>
    <el-dialog 
      :title="title"
      v-model="visible" 
      width="360px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form 
        ref="formRef" 
        :model="formData" 
        :rules="rules"
        label-position="right" 
        label-width="100px"
      >
        <el-form-item label="优先级" prop="type" required>
          <el-select 
            v-model="formData.type" 
            placeholder="请选择优先级"
            clearable
          >
            <el-option 
              v-for="item in getEnumBySn('priority')" 
              :key="item.value" 
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理人" prop="handleUser">
          <el-select 
            v-model="formData.handleUser" 
            placeholder="请选择处理人"
            clearable
          >
            <el-option 
              v-for="item in groupList"
              :key="item.value" 
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="处理原因" prop="handleReason">
          <el-autocomplete
            v-model="formData.handleReason"
            :fetch-suggestions="querySearch"
            placeholder="请输入处理原因"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitting">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {getEnumBySn, groupList} from "@/api/enums"
import request from '@/config/axios'

const visible = ref(false)
const formRef = ref()
const formData = ref({})
const submitting = ref(false)
const lastSubmitTime = ref(0)
const SUBMIT_INTERVAL = 1000 // 1秒内只能提交一次

const rules = {
  type: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  handleUser: [{ required: true, message: '请选择处理人', trigger: 'change' }]
}

const emit = defineEmits(["ok"])


const handleCancel = () => {
  visible.value = false
  formRef.value?.resetFields()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  // 防抖和限流检查
  const now = Date.now()
  if (now - lastSubmitTime.value < SUBMIT_INTERVAL) {
    ElMessage.warning('操作太频繁，请稍后再试')
    return
  }
  
  try {
    submitting.value = true
    lastSubmitTime.value = now
    
    await formRef.value.validate()
    await request.post({
      url: '/maintenance/addMaintenance',
      data: formData.value
    })
    
    ElMessage.success('添加成功')
    visible.value = false
    emit("ok")
  } catch (error) {
    // ElMessage.error('添加失败，请重试')
  } finally {
    submitting.value = false
  }
}

const suggestions = [
  {value: '联系家人'},
  {value: '电话多'},
  {value: '短信多'},
  {value: '曝通讯录'},
  {value: '去单位'},
  {value: '各平台留言'}
]


const querySearch = function (queryString, cb) {
  const results = queryString ? suggestions.filter(suggestion => suggestion.value.toLowerCase().includes(queryString.toLowerCase())) : suggestions
  // 调用 callback 返回建议列表的数据
  cb(results)
}
const title = ref('')
defineExpose({
  open: (rowData) => {
    formData.value = {
      "tgDtlId": rowData.id,
      "type": "3",
      "handleUser": "A",
    }
    title.value = rowData.platform
    visible.value = true
  }
})
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
